import React from "react";
import { Select, DatePicker, Input, Button, Tag } from "antd";
import { SearchOutlined, FilterOutlined, SortAscendingOutlined } from "@ant-design/icons";

const { RangePicker } = DatePicker;
const { Option } = Select;

interface ProjectFiltersProps {
  onFiltersChange: (filters: any) => void;
  onSortChange: (sort: any) => void;
  filters: any;
  sort: any;
}

const ProjectFilters: React.FC<ProjectFiltersProps> = ({ onFiltersChange, onSortChange, filters, sort }) => {
  // 项目筛选选项
  const projectStatusOptions = [
    { value: "active", label: "进行中", color: "#1890ff" },
    { value: "completed", label: "已完成", color: "#52c41a" },
    { value: "paused", label: "已暂停", color: "#faad14" },
    { value: "cancelled", label: "已取消", color: "#f5222d" }
  ];

  const projectSortOptions = [
    { value: "title", label: "项目名称" },
    { value: "createdAt", label: "创建时间" },
    { value: "updatedAt", label: "更新时间" },
    { value: "memberCount", label: "团队规模" },
    { value: "progress", label: "完成进度" }
  ];

  const handleFilterChange = (key: string, value: any) => {
    onFiltersChange({ ...filters, [key]: value });
  };

  const handleSortChange = (field: string) => {
    const newOrder = sort.field === field && sort.order === "desc" ? "asc" : "desc";
    onSortChange({ field: field as any, order: newOrder });
  };

  const clearFilters = () => {
    onFiltersChange({});
  };

  const getActiveFiltersCount = () => {
    return Object.values(filters).filter(
      value => value !== undefined && value !== null && (Array.isArray(value) ? value.length > 0 : true)
    ).length;
  };

  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
      <div className="flex flex-wrap items-center gap-4 mb-4">
        <div className="flex items-center gap-2">
          <SearchOutlined className="text-gray-400" />
          <Input
            placeholder="搜索项目名称或描述..."
            value={filters.search}
            onChange={e => handleFilterChange("search", e.target.value)}
            className="w-64"
            allowClear
          />
        </div>

        <Select
          mode="multiple"
          placeholder="项目状态"
          value={filters.status}
          onChange={value => handleFilterChange("status", value)}
          className="min-w-32"
          allowClear
        >
          {projectStatusOptions.map(option => (
            <Option key={option.value} value={option.value}>
              <Tag color={option.color} className="mr-1">
                {option.label}
              </Tag>
            </Option>
          ))}
        </Select>

        <div className="flex items-center gap-2">
          <span className="text-sm text-gray-600">创建时间:</span>
          <RangePicker
            value={filters.createdDate ? [filters.createdDate[0], filters.createdDate[1]] : undefined}
            onChange={dates => handleFilterChange("createdDate", dates ? [dates[0], dates[1]] : undefined)}
            className="w-64"
          />
        </div>
      </div>

      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <SortAscendingOutlined className="text-gray-400" />
            <span className="text-sm text-gray-600">排序:</span>
            <Select value={sort.field} onChange={handleSortChange} className="w-32">
              {projectSortOptions.map(option => (
                <Option key={option.value} value={option.value}>
                  {option.label}
                </Option>
              ))}
            </Select>
            <Button
              size="small"
              type={sort.order === "desc" ? "primary" : "default"}
              onClick={() => onSortChange({ ...sort, order: sort.order === "desc" ? "asc" : "desc" })}
            >
              {sort.order === "desc" ? "降序" : "升序"}
            </Button>
          </div>
        </div>

        <div className="flex items-center gap-2">
          {getActiveFiltersCount() > 0 && (
            <Tag color="blue" className="mr-2">
              <FilterOutlined className="mr-1" />
              {getActiveFiltersCount()} 个筛选条件
            </Tag>
          )}
          <Button onClick={clearFilters} size="small">
            清空筛选
          </Button>
        </div>
      </div>
    </div>
  );
};

export default ProjectFilters;
